<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="/index/sdk/element-ui.css">
</head>

<body>
  <div id="app">
    <el-container style="border: 1px solid #eee">
      <el-header style="text-align: right; font-size: 12px; height: 80px; background-color: rgb(0, 6, 11);">
        <el-image src="/index/sdk/logo.png" style="float: left;"></el-image>
        <ul class="header-operations">
          <li>主页</li>
          <li>帮助</li>
          <li><span class="header-lang is-active">
              中文
            </span> <span>/</span> <span class="header-lang">
              En
            </span></li>
        </ul>
        <el-dropdown>
          <i class="el-icon-setting" style="margin-right: 15px"></i>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>个人信息</el-dropdown-item>
            <el-dropdown-item>后台管理</el-dropdown-item>
            <el-dropdown-item>退出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-tag class="tag-myself">倔强的小韭菜</el-tag>
      </el-header>

      <el-container>
        <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
          <el-menu background-color="#303133" height="800px" default-active="stockTab" class="el-menu-vertical-demo"
            @select="switchMenu" text-color="#fff" active-text-color="#ffd04b">
            <el-menu-item index="stockTab">
              <i class="el-icon-location"></i>
              <span slot="title">股票数据</span>
            </el-menu-item>
            <el-menu-item index="crawlerTab">
              <i class="el-icon-menu"></i>
              <span slot="title">数据爬取</span>
            </el-menu-item>
            <el-menu-item index="analyseTab">
              <i class="el-icon-document"></i>
              <span slot="title">数据分析</span>
            </el-menu-item>
          </el-menu>
        </el-aside>

        <el-container>
          <el-main>

            <div id="stockTab" v-if="tabInfo.stockTab">
              <el-form :inline="true" :model="formData" class="demo-form-inline">
                <el-form-item label="名称">
                  <el-input v-model="formData.name" placeholder="名称"></el-input>
                </el-form-item>
                <el-form-item label="关注状态">
                  <el-select v-model="formData.status" placeholder="关注状态">
                    <el-option label="全部" value=""></el-option>
                    <el-option label="重点关注" value="1"></el-option>
                    <el-option label="稍微关注" value="2"></el-option>
                    <el-option label="已阅不关注" value="0"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="版块">
                  <el-select v-model="formData.type" multiple collapse-tags placeholder="请选择">
                    <el-option key="hs" label="沪指" value="SH60"></el-option>
                    <el-option key="hs" label="深指" value="SZ00"></el-option>
                    <el-option key="cyb" label="创业板" value="SZ30"></el-option>
                    <el-option key="kcb" label="科创板" value="SH68"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="onSubmit"
                    style="color: #FFF; background-color: #0A0909; border-color: #0A0909;">查询</el-button>
                </el-form-item>
              </el-form>

              <el-tag v-for="tag in dynamicTags" :key="tag.name" :type="tag.type" :hit="tag.hit" :effect="tag.effect"
                @click="clickTag(tag)">
                {{tag.name}}
              </el-tag>

              <el-table :data="tableData" @sort-change="sortStock">
                <el-table-column prop="symbol" label="编号" width="90" sortable='custom'>
                </el-table-column>
                <el-table-column prop="name" label="名称" width="90">
                </el-table-column>
                <el-table-column prop="marketCapital" label="市值" width="100" sortable='custom'>
                </el-table-column>
                <el-table-column prop="percent" label="当日涨跌" width="100" sortable='custom'>
                </el-table-column>
                <el-table-column prop="currentYearPercent" label="年初至今" width="100" sortable='custom'>
                </el-table-column>
                <el-table-column prop="dividendYield" label="股息率" width="90" sortable='custom'>
                </el-table-column>
                <el-table-column prop="current" label="当前价" width="90">
                </el-table-column>
                <el-table-column prop="readPriceStr" label="关注价 / 关注至今" width="160" sortable sort-by='readPercent'>
                </el-table-column>
                <el-table-column prop="readStatusStr" label="关注状态 / 时间" width="185" sortable sort-by='readTime'>
                </el-table-column>
                <el-table-column prop="symbol" label="操作" width="190">
                  <template slot-scope="scope">
                    <el-button icon="el-icon-search" circle size="mini" type="danger"
                      @click="viewDetail(scope.row.symbol)"></el-button>
                    <el-button icon="el-icon-star-off" circle size="mini" type="danger"
                      @click="followStock(scope.row.symbol, '1', scope.row.readStatus)"></el-button>
                    <el-button icon="el-icon-view" circle size="mini" type="danger"
                      @click="followStock(scope.row.symbol, '2', scope.row.readStatus)"></el-button>
                    <el-button icon="el-icon-thumb" circle size="mini" type="danger"
                      @click="followStock(scope.row.symbol, '0', scope.row.readStatus)"></el-button>
                    <el-tooltip placement="top">
                      <div slot="content">{{scope.row.comment}}</div>
                      <el-button icon="el-icon-edit-outline" circle size="mini" type="danger"
                        @click="editNote(scope.row.symbol, scope.row.comment)"></el-button>
                    </el-tooltip>
                  </template>
                </el-table-column>
                <el-table-column id="table-tags" prop="tags" label="标签">
                  <template slot-scope="scope">
                    <el-tag v-for="tag in scope.row.tags" :key="tag.name" type="warning" effect="plain"
                      @click="clickTag(tag)">
                      {{tag}}
                    </el-tag>
                  </template>
                </el-table-column>
              </el-table>

              <el-pagination @size-change="changeSize" @current-change="changePageNo" :current-page="pageInfo.pageNo"
                background layout="total, sizes, prev, pager, next" :total="pageInfo.total"
                :page-sizes="[8, 10, 12, 20, 50]" :page-size="pageInfo.pageSize">
              </el-pagination>
            </div>

            <div id="klineTab" v-if="tabInfo.klineTab">
              <div>
                <span>雨纷纷</span>
                <el-divider direction="vertical"></el-divider>
                <span>旧故里</span>
                <el-divider direction="vertical"></el-divider>
                <span>草木深</span>
              </div>
            </div>

            <div id="tagTab" v-if="tabInfo.tagTab">

            </div>


            <div id="crawlerTab" v-if="tabInfo.crawlerTab">
              <el-card class="box-card">
                <div slot="header" class="clearfix">
                  <span>更新所有股票基础信息</span>
                  <el-button style="float: right; padding: 6px 0; width: 100px;" type="success"
                    icon="el-icon-video-play" @click="updateStock">开始执行
                  </el-button>
                </div>
                <div style="height: 300px;">
                  <el-steps direction="vertical" :active="taskStep.updateStockStep"
                    :finish-status="taskStep.updateStockStatus">
                    <el-step title="发起任务"></el-step>
                    <el-step title="开始执行"></el-step>
                    <el-step title="任务完成" description=""></el-step>
                  </el-steps>
                </div>
              </el-card>
              <el-card class="box-card">
                <div slot="header" class="clearfix">
                  <span>更新所有股票k线信息</span>
                  <el-button style="float: right; padding: 6px 0; width: 100px;" type="success"
                    icon="el-icon-video-play" @click="updateKline">开始执行
                  </el-button>
                </div>
                <div style="height: 300px;">
                  <el-progress type="dashboard" :percentage="taskProcess.klinePercentage"
                    :color="taskProcess.klineColors" :status="taskProcess.klineStatus"></el-progress>
                </div>
              </el-card>
            </div>

            <div id="analyseTab" v-if="tabInfo.analyseTab">
              <el-card class="box-card">
                <div slot="header" class="clearfix">
                  <span>数据执行分析</span>
                  <el-button style="float: right; padding: 6px 0; width: 100px;" type="success"
                    icon="el-icon-video-play" @click="analyseStock">开始执行
                  </el-button>
                </div>
                <div style="height: 300px;">
                  <el-steps direction="vertical" :active="taskStep.analyseStep" :finish-status="taskStep.analyseStatus">
                    <el-step title="发起任务"></el-step>
                    <el-step title="开始执行"></el-step>
                    <el-step title="任务完成" description=""></el-step>
                  </el-steps>
                </div>
              </el-card>
            </div>

          </el-main>
          <el-footer>Footer</el-footer>
        </el-container>

      </el-container>

    </el-container>
  </div>

</body>
<!-- import Vue before Element -->
<script src="/index/sdk/vue.js"></script>
<script src="/index/sdk/axios.min.js"></script>
<!-- import JavaScript -->
<script src="/index/sdk/element-ui-index.js"></script>
<script>
  new Vue({
    el: '#app',
    data: function () {
      return {
        tabInfo: {
          stockTab: true,
          klineTab: false,
          tagTab: false,
          crawlerTab: false,
          analyseTab: false,
        },
        //表格数据
        tableData: [],
        //分页信息
        pageInfo: {
          pageSize: 20,
          pageNo: 1,
          total: 10,
          sortField: 'symbol',
          sortOrder: 'asc',
        },
        visible: false,
        isCollapse: false,
        //表单提交数据
        formData: {
          user: '',
          status: '',
          type: ['SH60', 'SZ00'],
          tags: []
        },
        //标签数据
        dynamicTags: [],
        //标签类型
        tagType: ['', 'success', 'info', 'warning', 'danger'],
        tagTypeIdx: 0,
        //任务执行步骤
        taskStep: {
          updateStockStep: 0,
          analyseStep: 0,
          updateStockStatus: 'wait',
          analyseStatus: 'wait',
        },
        //任务执行进度
        taskProcess: {
          klineStatus: '',
          klinePercentage: 0,
          klineColors: [
            { color: '#f56c6c', percentage: 20 },
            { color: '#e6a23c', percentage: 40 },
            { color: '#5cb87a', percentage: 60 },
            { color: '#1989fa', percentage: 80 },
            { color: '#6f7ad3', percentage: 100 }
          ]
        },
        //kline进度定时器
        timer: {},
      }
    },
    methods: {
      //导航页面切换
      switchMenu(key, keyPath) {
        if (key == 'stockTab') {
          this.tabInfo.stockTab = true;
          this.tabInfo.klineTab = false;
          this.tabInfo.tagTab = false;
          this.tabInfo.crawlerTab = false;
          this.tabInfo.analyseTab = false;

          this.pageInfo = {
            pageSize: this.pageInfo.pageSize,
            pageNo: 1,
            total: 10,
            sortField: 'symbol',
            sortOrder: 'asc',
          };
          this.formData = {
            user: '',
            status: '',
            type: ['SH60', 'SZ00'],
            tags: []
          };
          this.queryTags();
          this.onSubmit();

        } else if (key == 'klineTab') {
          this.tabInfo.stockTab = false
          this.tabInfo.klineTab = true
          this.tabInfo.tagTab = false
          this.tabInfo.crawlerTab = false
          this.tabInfo.analyseTab = false
        } else if (key == 'tagTab') {
          this.tabInfo.stockTab = false
          this.tabInfo.klineTab = false
          this.tabInfo.tagTab = true
          this.tabInfo.crawlerTab = false
          this.tabInfo.analyseTab = false
        } else if (key == 'crawlerTab') {
          this.tabInfo.stockTab = false
          this.tabInfo.klineTab = false
          this.tabInfo.tagTab = false
          this.tabInfo.crawlerTab = true
          this.tabInfo.analyseTab = false
        } else if (key == 'analyseTab') {
          this.tabInfo.stockTab = false
          this.tabInfo.klineTab = false
          this.tabInfo.tagTab = false
          this.tabInfo.crawlerTab = false
          this.tabInfo.analyseTab = true
        }
      },

      //表单查询事件
      onSubmit() {
        let data = {
          "pageSize": this.pageInfo.pageSize,
          "pageNo": this.pageInfo.pageNo,
          "tags": this.formData.tags,
          "name": this.formData.name,
          "status": this.formData.status,
          "type": this.formData.type,
          "sortField": this.pageInfo.sortField,
          "sortOrder": this.pageInfo.sortOrder,
        };
        axios.post(`/accumulate/v1/info/stock/query`, data).then(resp => {
          let res = resp.data.data
          this.pageInfo.total = res.total
          this.tableData = []
          res.record.forEach(item => {
            const stock = {
              symbol: item.symbol,
              name: item.name,
              marketCapital: item.marketCapital + '亿',
              percent: item.percent + '%',
              currentYearPercent: item.currentYearPercent + '%',
              dividendYield: item.dividendYield + '%',
              current: item.current,
              readPrice: item.readPrice,
              readStatus: item.readStatus,
              readTime: item.readTime,
              readStatusStr: item.readStatus + ' / ' + item.readTime,
              readPriceStr: ' / ',
              comment: item.comment,
              tags: item.tags
            };
            if (item.readPrice) {
              stock.readPriceStr = item.readPrice + ' / ' + item.readPercent + '%'
              stock.readPercent = item.readPercent
            }
            this.tableData.push(stock)
          });
        })
      },
      //表单排序
      sortStock(column) {
        console.log(column.prop, column.order)
        this.pageInfo.sortField = column.prop
        this.pageInfo.sortOrder = (column.order == 'ascending' ? 'asc' : 'desc')
        this.onSubmit()
      },
      //换页
      changePageNo(val) {
        this.pageInfo.pageNo = val;
        this.onSubmit();
      },
      //pageSize变更
      changeSize(val) {
        this.pageInfo.pageSize = val;
        this.onSubmit();
      },

      //编辑笔记
      editNote(symbol, comment) {
        let commentContent = comment
        const h = this.$createElement;
        this.$msgbox({
          title: '消息',
          message: h('textarea', {
            attrs: {
              class: 'el-textarea__inner',
              autocomplete: 'off',
              rows: 20,
              id: 'commentContent',
            },
          }, commentContent)
          ,
          showCancelButton: true,
          confirmButtonText: '评论',
          cancelButtonText: '取消',
          beforeClose: (action, instance, done) => {
            if (action === 'confirm') {
              let data = {
                'symbol': symbol,
                'comment': document.getElementById("commentContent").value,
              }
              axios.post(`/accumulate/v1/info/stock/comment`, data).then(resp => {
                this.onSubmit()
              });
              done();
            } else {
              done();
            }
          }
        }).then(action => {
          this.$message({
            type: 'success',
            message: '保存成功'
          });
        });
        document.getElementById("commentContent").value = commentContent
      },


      //查询标签
      queryTags() {
        axios.get(`/accumulate/v1/info/tags`).then(resp => {
          this.dynamicTags = []
          resp.data.data.forEach(item => {
            const tag = {
              name: item.name,
              value: item.value,
              type: this.rondomTagType(),
              effect: 'light',
            }
            this.dynamicTags.push(tag)
          })
        })
      },

      //访问stock详情
      viewDetail(symbol) {
        let url = 'https://xueqiu.com/S/' + symbol
        window.open(url);
      },

      followStock(symbol, status, origStatus) {
        let data = {
          "symbol": symbol,
          "status": status,
        };
        axios.post(`/accumulate/v1/info/stock/follow`, data).then(resp => {
          if (resp.data.code == 0) {
            this.onSubmit()
          }
        })
      },

      //更新所有股票基本信息
      updateStock() {
        this.taskStep.updateStockStep = 1
        this.taskStep.updateStockStatus = 'success'
        axios.post(`/accumulate/v1/exec/update/stock`).then(resp => {
          if (resp.data.code == 0) {
            this.taskStep.updateStockStep = 3
            this.taskStep.updateStockStatus = 'success'
          } else {
            this.taskStep.updateStockStep = 2
            this.taskStep.updateStockStatus = 'error'
          }
        });
      },

      //更新所有股票kline信息
      updateKline() {
        this.taskStep.updateKlineStep = 1
        this.taskStep.updateKlineStatus = 'success'
        axios.post(`/accumulate/v1/exec/update/kline`).then(resp => {
          if (resp.data.code == 0) {
            this.timer = window.setInterval(() => {
              setTimeout(() => {
                this.updateKlineProcess()
              }, 0)
            }, 1000)
          } else {
            this.taskProcess.klineStatus = 'exception'
          }
        });
      },
      updateKlineProcess() {
        axios.get(`/accumulate/v1/exec/update/kline/process`).then(resp => {
          this.taskProcess.klinePercentage = resp.data.data
          if (resp.data.data == 100) {
            this.taskProcess.klineStatus = 'success'
            clearInterval(this.timer)
          } else {
            this.taskProcess.klinePercentage = resp.data.data
          }
        }).catch(error => {
          clearInterval(this.timer)
          this.taskProcess.klineStatus = 'exception'
        })
      },

      //执行分析
      analyseStock() {
        this.taskStep.analyseStep = 1
        this.taskStep.analyseStatus = 'success'
        axios.post(`/accumulate/v1/exec/analyse`).then(resp => {
          if (resp.data.code == 0) {
            this.taskStep.analyseStep = 3
            this.taskStep.analyseStatus = 'success'
          } else {
            this.taskStep.analyseStep = 2
            this.taskStep.analyseStatus = 'error'
          }
        });
      },

      //随机生成标签类型
      rondomTagType() {
        if (this.tagTypeIdx == (this.tagType.length - 1)) {
          this.tagTypeIdx = 0
        } else {
          this.tagTypeIdx++
        }
        return this.tagType[this.tagTypeIdx]
      },

      //点击标签事件
      clickTag(tag) {
        if (tag.effect == 'light') {
          tag.effect = 'dark'
        } else {
          tag.effect = 'light'
        }
        this.formData.tags = []
        this.dynamicTags.forEach(tag => {
          if (tag.effect == 'dark') {
            this.formData.tags.push(tag.value)
          }
        })

        this.onSubmit();
      }
    },

    //页面初始化操作
    mounted: function () {
      this.queryTags();
      this.onSubmit();
    }
  })
</script>

<style>
  body {
    display: block;
    margin: 0;
  }

  .el-footer {
    line-height: 60px;
  }

  .header-operations {
    display: inline-block;
    padding-right: 30px;
    height: 100%;
  }

  .header-operations li {
    color: #fff;
    display: inline-block;
    vertical-align: middle;
    padding: 0 10px;
    margin: 0 10px;
    line-height: 60px;
    cursor: pointer;
    font-size: 13px;
  }

  .tag-myself {
    background-color: rgb(0, 6, 11);
    border-color: #fff;
    color: #fff;
  }

  .el-main {
    height: 800px;
  }

  .el-aside {
    color: #409EFF;
  }

  .el-menu {
    height: 100%;
  }

  .el-pagination {
    float: right;
    padding-top: 30px;
  }

  .el-tag {
    margin-right: 15px;
    padding: 0 20px;
    cursor: pointer;
  }

  .el-table .el-tag {
    padding: 0 5px;
    margin-right: 3px;
  }


  .el-table {
    padding-top: 20px;
  }

  table {
    text-align: center;
  }

  .el-table .el-table__cell {
    padding: 9px 0;
  }

  .el-message-box {
    width: 50%;
  }

  .box-card {
    width: 480px;
    height: 400px;
    float: left;
    margin-right: 50px;
  }

  .el-button+.el-button {
    margin-left: 1px;
  }

  .el-button--mini.is-circle {
    padding: 5px;
  }
</style>

</html>